import parent from '../relation/parent'
import { injectStore } from 'ee-vuex'
export default injectStore({
  mixins: [parent],
  data() {
    return {
      __dirty: false,
    }
  },
  props: {
    /** 绑定所有选中子组件的value，若子组件缺少value则是undefined */
    modelValue: {
      // default: function() { return this.radio ? undefined : [] },
      default: () => this.radio ? undefined : [],
      set(value) {
        if (this.radio) {
          // 根据modelValue的值，设置子元素的checked属性(子元素自己设置的值，不用再这样设置回去)
          if (!this.__dirty)
            for (let child of this.children)
              child._checked = child.__value == value;
        } else {
          // 只有可能外部传值修改数组，内部不更改数组对象的引用
          if (!value || !(value instanceof Array))
            this.__modelValue = [];
          // 根据数组里的值，设置子元素的checked属性
          for (let child of this.children)
            child._checked = this.__modelValue.indexOf(child.__value) != -1;
        }
        this.change();
        if (!this.radio)
          this.checkMinMax();
      },
    },
    /** 至少要选中的项数，选项过少则选中的不能取消 */
    min: [Number, String],
    /** 最多可选中的项数，选项过多则没选中的不能再选 */
    max: [Number, String],
  },
  emits: ["onchange"],
  computed: {
    /** 是否单选，默认true */
    radio() { return true; },
    /** 所有选中的子组件的对象 */
    selected() {
      if (this.radio)
        return this.children.find(i => i.__checked);
      let array = [];
      for (let item of this.children)
        if (item.__checked)
          array.push(item);
      return array;
    },
    /** 所有选中的子组件的索引 */
    selectedIndex() {
      if (this.radio) {
        for (let i = 0; i < this.children.length; i++)
          if (this.children[i].__checked)
            return i;
        return -1;
      }
      let array = [];
      for (let i = 0; i < this.children.length; i++)
        if (this.children[i].__checked)
          array.push(i);
      return array;
    },
    /** 所有选中的子组件的值，会过滤一样的值 */
    selectedValue() {
      if (this.radio)
        return this.children.find(i => i.__checked)?.__modelValue;
      let array = [];
      for (let item of this.children)
        if (item.__checked && array.indexOf(item.__value) == -1)
          array.push(item.value);
      return array;
    }
  },
  methods: {
    /** 下一帧触发onchange事件 */
    change() {
      if (this.__dirty) return;
      this.__dirty = true;
      this.$nextTick(this.dochange);
    },
    /** 触发onchange事件 */
    dochange() {
      this.__dirty = false;
      this.$emit("onchange", this);
    },
    /** 子组件选中状态发生改变通知自己修改v-model的值 */
    updateValue(value) {
      this.change();
      if (this.radio) {
        this._modelValue = value;
      } else {
        // __modelValue有默认值数组，外部绑定了undefined，子组件又设置了checked
        // 那么把内部__modelValue同步给外部绑定的modelValue
        this.$emit("update:modelValue", this.__modelValue);
        this.checkMinMax();
      }
    },
    /** 根据配置的min和max对子组件增加/删除disabled属性 */
    checkMinMax() {
      if (this.max > 0) {
        if (this.__modelValue.length >= this.max) {
          // 没选中的不能再选了
          for (let child of this.children)
            if (!child.__checked)
              child.$el.setAttribute("disabled", true);
        } else {
          // 没选中的又可以再选了
          for (let child of this.children)
            if (!child.__checked)
              child.$el.removeAttribute("disabled");
        }
      }
      if (this.min > 0) {
        if (this.__modelValue.length > this.min || this.max == this.min) {
          // 选中的可以取消了
          for (let child of this.children)
            if (child.__checked)
              child.$el.removeAttribute("disabled");
        } else {
          // 选中的不能再取消了
          for (let child of this.children)
            if (child.__checked)
              child.$el.setAttribute("disabled", true);
        }
      }
    },
    // resetModelValue() {
    //   let temp = this.__modelValue;
    //   this.__modelValue = null;
    //   this._modelValue = temp;
    // },
    // addValue(value) {
    //   if (this.__modelValue.indexOf(this.__value) == -1) {
    //     this.__modelValue.push(this.__value);
    //     this.resetModelValue();
    //   }
    // },
    // removeValue(value) {
    //   let flag = false;
    //   for (let i = this.__modelValue.length - 1; i >= 0; i--) {
    //     if (this.__modelValue[i] == value) {
    //       this.__modelVale[i].splice(i, 1);
    //       flag = true;
    //     }
    //   }
    //   if (flag)
    //     this.resetModelValue();
    // },
    checkAll(value) {
      if (!this.radio) return;
      let bool = !!value;
      for (let item of this.children)
        item._checked = bool;
    },
    /** 没有全选则全选 / 已经全选则取消全选 */
    toggleAll() {
      if (!this.radio) return;
      let flag = this.children.find(i => !i.__checked);
      this.checkAll(flag);
    },
    /** 反选 */
    reverseAll() {
      if (!this.radio) return;
      for (let item of this.children)
        item._checked = !item.__checked;
    },
  },
  watch: {
    /** 外部可能对数组进行增减操作 */
    "modelValue.length"(value) {
      if (this.__dirty || this.radio) return;
      // this.resetModelValue();
      let temp = this.__modelValue;
      this.__modelValue = null;
      this._modelValue = temp;
    }
  }
})